<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="file" />

    <script>

        function upload(blobOrFile) {

            return;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/server', true);
            xhr.onload = function (e) { };
            xhr.send(blobOrFile);
        }

        document.querySelector('input[type="file"]').addEventListener('change', function (e) {

            var selected_file = this.files[0]

            var fileName = selected_file.name;
            var fileSize = selected_file.size;
            var fileType = selected_file.type;
            console.log(`========文件名：${fileName}=======`)
            console.log(`========大小${fileSize}=======`)
            console.log(`========类型：${fileType}=======`)


            var totalSize = selected_file.size  //获取file的大小  单位字节
            var perchunk = 1024 * 1024;
            var start = 0;
            var end = perchunk;
            var count = totalSize % perchunk == 0 ? totalSize / perchunk : Math.floor(totalSize / perchunk) + 1   //需要上传的次数
            var index = 0;

            console.log("文件总大小:" + totalSize + "kb");

            while (index < count) {
                console.log("=======第" + (index + 1) + "次========")
                console.log(start, "=======start========")

                if (index == count - 1) {
                    upload(start, totalSize)
                    console.log(totalSize, "=======end========")
                } else {
                    upload(start, end)
                    console.log(end, "=======end========")
                }
                start = end
                end = start + perchunk


                index++
            }

        }, false);

    </script>

</body>

</html>